<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>符号预览(雪碧图)</title>
    <script src="js/configData.js"></script>
    <script src="js/demo.js"></script>
    <link rel="stylesheet" href="css/demo.css">
    <style>
        .img-item {
            display: inline-block;
            background: url("assets/tileExt/sprite.png");
            border:solid 1px #000;
            margin:1px;
        }
    </style>

</head>
<body id="body">
<div id="spriteImgs">
    <!--    <div class="img-item" style="background-position: 0px 0px;width:80px;height:80px;"></div>-->
</div>
<script>

    let xhr = new XMLHttpRequest()
    xhr.responseType = 'json'
    xhr.open('get','assets/tileExt/sprite.json')
    xhr.onreadystatechange = e => {

        if(e.currentTarget.readyState == 4){
            loadSprite(e.currentTarget.response)
        }
    }
    xhr.send()
    function loadSprite(imgData){
        for (let symId in imgData) {
            let symData = imgData[symId]
            let divEle = document.createElement('div')
            divEle.className = 'img-item'
            divEle.style['background-position'] = `-${symData.x}px -${symData.y}px`
            divEle.style.width = symData.width + 'px'
            divEle.style.height = symData.height + 'px'
            document.getElementById('spriteImgs').appendChild(divEle)
            // <div class="img-item" style="background-position: 0px 0px;width:80px;height:80px;"></div>
        }
    }



</script>
</body>
</html>

